<!-- coupon 界面 -->
<template>
    <div>
        <navTitle title="优惠券列表"></navTitle>
        <seartch :array="array" @searchValues="searchValues"></seartch>
        <dataList :datalisttitle="datalisttitle"></dataList>
        <div>
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="date" label="Date" align="center">
                    <template #header>
                        <input type="checkbox" v-model="bothChose" @click="OnBothChose">
                    </template>
                    <template #default="scoped">
                        <input type="checkbox" v-model="choseOr[scoped.row.id]" @click="onChoseOr">
                    </template>
                </el-table-column>
                <el-table-column prop="id" label="编号" align="center"></el-table-column>
                <el-table-column prop="name" label="优惠券名称" align="center"></el-table-column>
                <el-table-column label="优惠券类型" align="center">
                    <template #default="scoped">
                        {{ scoped.row.type == 0
                            ? '全场赠券'
                            : (scoped.row.type == 1
                                ? '会员赠券'
                                : (scoped.row.type == 2
                                    ? '购物赠券'
                                    : '注册赠券')) }}
                    </template>
                </el-table-column>
                <el-table-column label="可使用商品" align="center">
                    <template #default="scoped">
                        {{ scoped.row.useType == 0 ? '全场通用' : '指定商品' }}
                    </template>
                </el-table-column>
                <el-table-column prop="minPoint" label="使用门槛" align="center">
                    <template #default="scoped">
                        {{ '满' + scoped.row.minPoint + '元可用' }}
                    </template>
                </el-table-column>
                <el-table-column prop="amount" label="面值" align="center">
                    <template #default="scoped">
                        {{ scoped.row.amount + '元' }}
                    </template>
                </el-table-column>
                <el-table-column prop="platform" label="适用平台" align="center">
                    <template #default="scoped">
                        {{ scoped.row.platform == 0 ? '全平台' : (scoped.row.platform == 1 ? '移动平台' : 'PC平台') }}
                    </template>
                </el-table-column>
                <el-table-column label="有效期" align="center">
                    <template #default="scoped">
                        {{ dayjs(scoped.row.startTime).format("YYYY-MM-DD HH:mm:ss")+'至'+dayjs(scoped.row.endTime).format("YYYY-MM-DD HH:mm:ss") }}
                    </template>
                </el-table-column>
                <el-table-column label="状态" align="center">
                    <template #default="scoped">
                        {{ new Date().getTime() - new Date(scoped.row.endTime).getTime() > 0 ? '已过期' : '未过期' }}
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="操作" align="center" width="150">
                    <template #default="scoped">
                        <i class="dosth" @click="setSth(scoped.row.id)">查看</i>&nbsp;
                        <i class="dosth" @click="writeSth(scoped.row.id)">编辑</i>
                        <i class="dosth"><el-button text @click="open(scoped.row.id)"
                                style="color : red;">删除</el-button></i>
                    </template>
                </el-table-column>
            </el-table>
            <div style="display: flex;justify-content: flex-end;padding-top: 10px;">
                <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[5, 10, 15, 20]"
                :defaultPageSize="5" layout="total, sizes, prev, pager, next, jumper" :total="total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import navTitle from '@/components/_s_yingxiao/_s_NavTitle.vue'
import seartch from '@/components/_s_yingxiao/_s_Serch.vue'
import dataList from '@/components/_s_yingxiao/_s_DataList.vue'
import * as dayjs from 'dayjs'
import { ref, reactive, nextTick, watch } from 'vue';
import { useRouter } from 'vue-router'
import { flash } from '@/request/api'
import { ElMessage, ElMessageBox } from 'element-plus'

const router = useRouter()

// 定义基础的信息
let pageNum = ref(1) //当前第几页
let totalPage = ref(0) //当前一共多少页
let pageSize = ref(5) //当前每页几条数据
let total = ref(0)  //当前一共多少条数据
let tableData = ref([]) //优惠券列表
let choseOr = reactive({}) //是否被方形选择框选中
let bothChose = ref(false) //是否满足所有的选框都被选中
let name = ref('') // 优惠券名称
let type = ref(null) // 优惠券类型

watch(choseOr, (newData, oldData) => {
    for (let i in choseOr) {
        if (!choseOr[i]) {
            bothChose.value = false
            return
        }
    }
    bothChose.value = true
}, {
    deep: true
})

let OnBothChose = () => { // 全选事件
    for (let i in choseOr) {
        choseOr[i] = !bothChose.value
    }
}
let onChoseOr = () => { // 多选框单击事件

}

// 页面更新函数 -- 重新发送请求渲染页面
function AX() {
    flash.couponList({
        pageNum: pageNum.value,
        pageSize: pageSize.value,
        name: name.value,
        type: type.value
    }).then(res => {
        for (let i = 0; i < res.list.length; i++) {
            choseOr[res.list[i].id] = false
        }
        tableData.value = res.list
        totalPage.value = res.totalPage
        total.value = res.total
        pageSize.value = res.pageSize
        pageNum.value = res.pageNum
    })
}
// 发送请求获取
AX()

// 设置商品
let setSth = (e: number) => {
    router.push(`/sms/couponHistory?id=${e}`)

}
// 编辑商品
let writeSth = (e: number) => {
    router.push(`/sms/updateCoupon?id=${e}`)
}
// 删除商品

const open = (e: number) => {
    ElMessageBox.confirm(
        '是否确认删除',
        '确认框',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            flash.deleteCupon(e).then(res => {
                AX()
            })
            ElMessage({
                type: 'success',
                message: '删除成功',
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '删除失败',
            })
        })
}
let array = [{ //搜索栏的数据
    title: '优惠券名称',
    havelist: false,
    placeholder: '优惠券名称'
}, {
    title: '优惠券类型',
    placeholder: '全部',
    havelist: true,
    appNameList: [
        '全场赠券',
        '会员赠券',
        '购物赠券',
        '注册赠券'
    ]
}]
let datalisttitle = [  //传给数据列表的内容
    {
        val: '添加'
    }
]

// 子传父的搜素内容
let searchValues = (e) => {
    // console.log(e[0], e[1]);
    name.value = e[0]
    let newType = e[1] == '全场赠券'
        ? 0
        : (e[1] == '会员赠券'
            ? 1
            : (e[1] == '购物赠券'
                ? 2
                : (e[1] == '注册赠券'
                    ? 3
                    : null)))

    type.value = newType
    AX()
}

//翻页数据
let handleSizeChange = (e) => {
    // console.log(e);
    pageSize.value = e
    AX()
}
let handleCurrentChange = (e) => {
    // console.log(e);
    pageNum.value = e
    AX()
}

</script>
 
<style lang="scss" scoped>
i {
    cursor: pointer;
}

.dosth {
    color: rgb(64, 158, 255);
}
</style>